<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        dl{
            overflow: hidden;
            /* transition: .3s; */
        }
        .active {
            color: red;
        }
    </style>
</head>
<body>

    <ul>
        <li>
            <p>教学系统</p>
            <dl>
                <dd>学员信息</dd>
                <dd>班级信息</dd>
                <dd>开班计划</dd>
            </dl>
        </li>
        <li>
            <p>教学系统</p>
            <dl>
                <dd>学员信息</dd>
                <dd>班级信息</dd>
            </dl>
        </li>
        <li>
            <p>教学系统</p>
            <dl>
                <dd>学员信息</dd>
                <dd>班级信息</dd>
                <dd>开班计划</dd>
                <dd>开班计划</dd>
            </dl>
        </li>
    </ul>

    <script>

        // 首先不隐藏元素  dl的高度是由内容撑开的
        // 首先获取dl的高度,把高度存起来  再隐藏dl

        // 判断是否是折叠的状态

        // 如果使用了运动函数   点击快的时候就会抖动
        //    立flag    每一个列表都要flag

        const oPs = document.querySelectorAll('p');
        const oDls = document.querySelectorAll('dl') ;
        


        for(let i = 0 ; i < oDls.length ; i++) {
            // console.log(oDls[i].offsetHeight);
            oDls[i].index = oDls[i].offsetHeight ;

            oDls[i].style.height = 0;
        }


        for(let i = 0 ; i < oPs.length ; i++) {
            // 防止连点
            let flag = true ;
            oPs[i].onclick = function() {
                console.log(flag);
                if(!flag) return 
                // console.log(i);
                // 判断dl是不是打开的  -- 判断有没有active
                flag = false ;
                if(this.classList.contains('active')) {
                    this.classList.remove('active');
                    animate(this.nextElementSibling , {
                        height : 0
                    } , function() {
                        flag = true ;
                    })
                } else {
                    this.classList.add('active');
                    console.log(this.nextElementSibling.index)
                    animate(this.nextElementSibling , {
                        height : this.nextElementSibling.index
                    } , function() {
                        flag = true ;
                    })
                }
                
            }
        }



        function animate(ele, obj, cb) {
            let t = setInterval(function () {
                // 遍历属性
                for (let key in obj) {
                    let cur, speed;
                    // 判断属性为opacity
                    if (key === 'opacity') {
                        // 把值放大100倍
                        cur = getComputedStyle(ele)[key];  // 0.2*100    1*100
                        cur *= 100;
                        speed = (obj[key] * 100 - cur) / 10;
                    } else {
                        cur = parseInt(getComputedStyle(ele)[key]);
                        speed = (obj[key] - cur) / 10;
                    }

                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                    cur += speed;
                    // 判断透明度
                    if (key === 'opacity') {
                        // 之前放大了100倍    / 100
                        ele.style[key] = cur / 100;
                    } else {
                        ele.style[key] = cur + 'px';
                    }


                    // 判断到达终点就把属性给删除
                    if (cur === obj[key]) {
                        // 
                        delete obj[key];
                        // 判断对象为空的时候  {}
                        if (Object.keys(obj).length === 0) {
                            clearInterval(t);
                            cb && cb();
                        }
                    }
                }
            }, 20)
        }

    </script>
    
</body>
</html>